<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>计算属性</h1>
        <p>
            依赖缓存：当源数据没有变化时，会将计算结果缓存起来，方便下次使用，避免重复计算。
        </p>
        <p v-for="item in res">
            <span>姓名：{{item.name}}</span>
            <span>成绩：{{item.point}}</span> 
        </p>
        <!--<p>平均成绩：{{avaPoint}}</p>-->
        <hr>
        颜值：<input type="text" v-model="beauty">
        <p>{{msg}}</p>
        <p v-show="isBf">震惊！易烊千玺女友曝光，竟然是她。。。</p>
        <p v-show="isHot">爆！男人看了会沉默，女人看了会流泪</p>
        <p v-show="isDown">程序员开启996</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                res:[
                    {name:'hmq',point:100},
                    {name:'xm',point:99},
                    {name:'lyq',point:98},
                    {name:'fl',point:97},
                ],
                age:18,
                info:'',
                //初识颜值
                beauty:80,
                msg:'你好，打工人',
                //易烊千玺是不是你男朋友
                isBf: false,
                // 上热搜
                isHot: false,
                // 微博服务器崩溃
                isDown: false
            },
            watch: {
                age: function (newValue, oldValue) {
                    console.log(newValue, oldValue);
                    if(newValue<18) {
                        this.info = '未成年人禁止入内！'
                    }else if(newValue == 18) {
                        this.info = '你已经18岁了，可以做一些成年人做的事情了'
                    }else {
                        this.info = '你可以退休了'
                    }
                },
                // 监听颜值的变化
                beauty: function(newValue, oldValue) {
                    if(newValue<90 && newValue>=85) {
                        this.msg = '你好，小姐姐'
                    }else if(newValue>=90) {
                        this.msg = '易烊千玺：送你一朵小红花';
                        this.isBf = true;
                        this.isHot = true;
                        this.isDown = true;
                    }
                }
            },
            methods:{
                avaPoint1() {
                    console.log('fn');
                    let num = 0;
                    this.res.forEach(item => {
                        num += item.point
                    });
                    let len = this.res.length;
                    let totalNum = num/len;
                    return totalNum
                }
            },
            //计算属性：
            computed: {
                avaPoint() {
                    console.log('computed');
                    let num = 0;
                    this.res.forEach(item => {
                        num += item.point
                    });
                    let len = this.res.length;
                    let totalNum = num/len;
                    return totalNum
                }
            },                
        });
    </script>
</body>
</html>